/* just override what you need */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': rgb(0, 137, 75),
    ),
    'success': (
      'base': #00b96b,
    ),
    'warning': (
      'base': #ffb700,
    ),
    'error': (
      'base': #ff0000,
    ),
    'info': (
      'base': #909399,
    ),
  )
);

.el-button {
  font-family: 'Roboto';
}

.el-form-item {
  font-family: 'Roboto';
}

.el-form-item {
  margin: 10px;
  margin-left: 15px;
}

// 下拉框样式
.el-dropdown-menu {
  font-family: 'Roboto';
  padding: 10px;
  border-radius: 50px;

  .el-dropdown-menu__item {
    border-radius: 10px;
    transition: all 0.3 ease;
  }
}
// 下拉框箭头
.el-popper {
  border-radius: 10px;
  .el-popper__arrow {
    display: none !important;
  }
}

// 通知复写
.el-message {
  backdrop-filter: blur(10px) !important;
  border-radius: 20px !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  &:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
  }
}
.el-message__content {
  font-family: 'Roboto';
}

// 消息盒子
.el-message-box {
  border-radius: 10px !important;
}

// 遮罩层
.el-overlay {
  background-color: rgba(158, 158, 158, 0.203) !important;
  backdrop-filter: blur(5px) !important;
}
// 按钮
.el-button {
  border-radius: 20px !important;
}

// 表格复写
.el-table {
  border-radius: 10px;
  flex: 1;
}
// 表单
.el-form-item {
  font-weight: 500;
}

.el-dialog {
  border-radius: 10px;
}

.el-loading-mask {
  backdrop-filter: blur(3px) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

// 分页样式
.el-pagination {
  display: inline-flex;
  margin-left: auto;
  padding: 10px;
  background-color: var(--el-menu-hover-bg-color);
  border-radius: 10px;
}

.el-dialog__title {
  position: relative;
  opacity: 1;
  animation: emerge 1s ease-in-out;
  &::before {
    content: '';
    display: block;
    width: 3px;
    position: absolute;
    height: 30px;
    top: -3px;
    left: -7px;
    background: linear-gradient(to top, var(--el-color-primary), var(--el-color-success));
    border-radius: var(--el-border-radius-round);
    animation: stretch 2s ease-in-out;
    box-shadow: 0 0 1px 0.5px var(--el-color-primary); // Further reduced shadow glow size
  }
  @keyframes stretch {
    0% {
      height: 0px;
    }
    50% {
      height: 30px;
    }
  }
}
@keyframes emerge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

:root {
  --el-border-radius-base: 10px; /* 基础圆角 */
  --el-border-radius-small: 15px; /* 小型组件圆角 */
  --el-border-radius-round: 25px; /* 圆形组件圆角 */
}
.el-card {
  border-radius: 10px;
}

* {
  scrollbar-width: thin; /* 使滚动条变细 */
  scrollbar-color: #bfbfbf #f2f2f2; /* 滑块和轨道的颜色 */
  scrollbar-color: #3c8733 white;
}
